const $container = document.querySelector('div')
// https://misc.aotu.io/JChehe/2017-08-28-getting-started-with-threejs/three_render.jpg
const scene = new THREE.Scene();
/**
 * 创建相机
 * 
 * fov,视角的夹角,https://www.cnblogs.com/tutumissed/p/8276436.html
 * aspect,视口的长宽比
 * near,摄像机离物体的最近距离
 * far,摄像机离物体的最远距离
 * PerspectiveCamera(fov,aspect,near,far)
 */
const camera = new THREE.PerspectiveCamera(45, $container.clientWidth / $container.clientHeight, 0.1, 1000);
// 设置相机的z轴的值为1000
// camera.position.x = -10;
// camera.position.y = 2;
// camera.position.z = 100;

// camera.rotation.x = -10 / 180 * Math.PI
// camera.rotation.y = -45 / 180 * Math.PI

// camera.rotateY(45 / 180 * Math.PI)
// scene.add(camera)

// 创建WebGl Render
const renderer = new THREE.WebGLRenderer({
    // alpha: true
    antialias: true
});
// renderer.outputEncoding = THREE.sRGBEncoding;
// 设置canvas的长宽以及dpr
renderer.setSize($container.clientWidth, $container.clientHeight);
renderer.setClearColor(0x404040)
// 添加canvas
$container.appendChild(renderer.domElement);

// global light
// const light = new THREE.AmbientLight(0xffffff, 1); // soft white light
// scene.add(light);

// directional light
const directionalLight = new THREE.DirectionalLight(0xf0f0f0, 2)
// const directionalLight = new THREE.DirectionalLight(0xff0000, 2)
directionalLight.position.set(1, 0, 0)
// directionalLight.castShadow=true
scene.add(directionalLight)

function animate() {
    renderer.render(scene, camera);
    requestAnimationFrame(animate)
}

// const controls = new THREE.OrbitControls(camera, renderer.domElement)
// controls.addEventListener('change', renderer)

// const light2 = new THREE.PointLight( 0xffffff ); // soft white light
// scene.add( light2 );


// const geometry = new THREE.BoxGeometry(200, 200, 200);
// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// const cube = new THREE.Mesh(geometry, material);
// scene.add(cube);

// renderer.render(scene, camera);

// 坐标系: https://www.cnblogs.com/lzpong/p/7904615.html
var axes = new THREE.AxisHelper(100);
// scene.add(axes);
